<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .Header {
            width: 970px;
            margin-bottom: 8px;
        }

        .Header::after {
            content: "";
            clear: both;
            display: block;
        }

        .Logo {
            width: 277px;
            height: 103px;
            margin-right: 8px;
            background-color: red;
            float: left;
        }

        .Lang {
            width: 137px;
            height: 49px;
            margin-bottom: 8px;
            background-color: green;
            float: right;
        }

        .Nav {
            width: 670px;
            height: 46px;
            background-color: green;
            float: right;
        }

        .Main {
            width: 970px;
            margin-bottom: 8px;
        }

        .Main::after {
            content: "";
            clear: both;
            display: block;
        }

        .Ads {
            width: 310px;
            height: 435px;
            float: left;
            background-color: yellow;
        }

        .Container {
            width: 450px;
            height: 390px;
            float: left;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .Section-Top {
            width: 450px;
            height: 240px;
            background-color: aquamarine;
        }

        .Section-Center {
            width: 450px;
            height: 110px;
            margin-top: 10px;
            background-color: aquamarine;
        }

        .Section-Bottom {
            width: 450px;
            height: 30px;
            margin-top: 10px;
            background-color: aquamarine;
        }

        .Aside {
            width: 190px;
            height: 400px;
            float: left;
            background-color: blueviolet;
        }

        .Section-RightBottom {
            width: 650px;
            height: 25px;
            float: left;
            background-color: blue;
            margin-left: 10px;
            margin-top: 10px;
        }

        .Bottom {
            width: 970px;
            height: 30px;
            background-color: orange;

        }
    </style>
</head>

<body>
    <div class="Index">
        <div class="Header">
            <div class="Logo">Logo</div>
            <div class="Lang">Lang</div>
            <div class="Nav">Nav</div>
        </div>

        <div class="Main">
            <div class="Ads">Ads</div>
            <div class="Container">
                <div class="Section-Top">Section-Top</div>
                <div class="Section-Center">Section-Center</div>
                <div class="Section-Bottom">Section-Bottom</div>
            </div>
            <div class="Aside">Aside</div>
            <div class="Section-RightBottom">Section-RightBottom</div>
        </div>
        <div class="Bottom">Bottom</div>
    </div>
</body>

</html>